<template>
  <div class="load-wrap"
       @click.stop="handleLoading"
       v-if="finish">{{more}}</div>
  <div class="load-wrap"
       v-else>{{nomore}}</div>
</template>

<script>
export default {
  name: 'LoadMore',
  props: {
    load: {
      type: Boolean
    },
    finish: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      more: '查看更多',
      nomore: '没有更多'
    }
  },
  methods: {
    handleLoading () {
      const LOADING = '加载中...'
      this.more = LOADING
      this.$emit('loadMore')
    }
  },
  watch: {
    load (flag) {
      const LOADING = '加载中...'
      const LOADFINISH = '查看更多'
      this.more = flag === false ? LOADFINISH : LOADING
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.load-wrap
  width 100%
  line-height 34px
  text-align center
  font-size $address
  color $location
  margin-bottom 20px
</style>
